<template>
  <div class="search-option">
    <label v-if="label">{{ label }}</label>
    <el-select
      v-model="query"
      filterable
      @change="change"
      :clearable="!clearable"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
        <span>{{ item.label }}&nbsp;&nbsp;</span>
        <span>{{ item.area }}</span>
      </el-option>
    </el-select>
  </div>
</template>
<script setup>
import { ref, watch } from "vue";
const props = defineProps({
  modelValue: {
    default: "",
  },
  label: {
    type: String,
    default: "",
  },
  clearable: {
    default: true,
  },
});
const query = ref(props.modelValue);
watch(
  () => props.modelValue,
  (newValue, oldValue) => {
    query.value = newValue;
  },
  {
    immediate: true,
  },
);
const emit = defineEmits(["change", "update:modelValue"]);
const options = [
  {
    value: "+86",
    label: "+86",
    area: "中国",
  },
  {
    value: "+852",
    label: "+852",
    area: "中国香港",
  },
  {
    value: "+886",
    label: "+886",
    area: "中国台湾",
  },
  {
    value: "+1",
    label: "+1",
    area: "美国",
  },
];
const change = (val) => {
  query.value = val;
  emit("update:modelValue", query);
  emit("change", query);
};
</script>
<style scoped lang="scss">
.search-option {
  width: 50px;
  color: map-get($map: $font-sizes, $key: text);
}
</style>
